<!-- 区域的组件 -->
<template>

  <el-row>
    <el-card class="box-card" :header="widget.options.header" :shadow="widget.options.shadow">
      <div v-for="(column1,index) in tableData" :key="index">
        <div v-for="(column,p_index) in columns" :key="column.key" :class="{'el-col-24': columns.length%2!=0&&p_index==columns.length-1}">

          <el-col :span="column.options !== undefined && column.options.span" class="drag-widget field-item">
            <!--			<label v-if="column.type != 'divider'" style="min-width:70px;float: left;"  :class="{'is_req': column.options.required,'display':'block'}"> {{column.name}}: </label>-->
            <div v-if="column">
              <div v-if="column.model">
                <el-form-item :class="{'is_req': column.options.required,'display':'block'}" :label="getLable(column)" :prop="widget.model+'.'+index+'.'+column.model" :rules="column.rules?column.rules:[]">

                  <GenerateElementItem
                    v-model="value[index][column.model]"
                    :blanks="blanks"
                    is-table="block"
                    :path="widget.model+'.'+index+'.'+column.model"
                    :models_temp="models_temp"
                    :widget="column"
                    :remote="remote"
                    :models.sync="dataModels"
                    :strut-all="strutAll"
                    :index="2"
                  />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </div>
      </div>

    </el-card>

  </el-row>

</template>

<script>
import { importXLSX } from '../../router/xlsx.js'
import { verification } from '../../router/verification.js'
import { getLable } from '../../js/formUtils.js'

function isInArray(arr, value) {
  for (var i = 0; i < arr.length; i++) {
    if (value === arr[i]) {
      return true
    }
  }
  return false
}
export default {

  components: {
    GenerateElementItem: () => import('../../GenerateElementItem.vue')
  },
  props: ['columns', 'value', 'models', 'remote', 'blanks', 'models_temp', 'widget', 'strutAll', 'data', 'path'],
  data() {
    // console.log(this.columns[0].options.defaultValue);
    return {
      tableData: this.value,
      dataModels: this.models,
      checkedCities: [],
      dialogVisible: false,
      dialogFormVisible: false
    }
  },
  watch: {
    /* value (val) {
				this.tableData = val
			},
			tableData (val) {
				this.$emit('input', val)
			},
			dataModels: {
				deep: true,
				handler (val) {
					this.$emit('update:models', val)
				}
			},
			models: {
				deep: true,
				handler (val) {
					this.dataModels = val
				}
			}*/
  },
  created() {
    for (var i = 0; i < this.columns.length; i++) {
      if (this.columns[i].rules) {
        for (var j = 0; j < this.columns[i].rules.length; j++) {
          this.columns[i].rules[j].validator = this.validatePass
        }
      }
    }
  },
  methods: {
    getLable: function(element) {
      return getLable(element)
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback)
    },
    handleAddRow() {
      // eslint-disable-next-line no-unused-vars
      var dataModels = this.dataModels
      const item = {}
      if (this.columns !== undefined) {
        if (this.columns.length > 0) {
          for (let i = 0; i < this.columns.length; i++) {
            item[this.columns[i].model] = ''
          }
        }
      }
      this.tableData.push(item)
    },
    handleRemove(index) {
      this.tableData.splice(index, 1)
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true
        }
      }
      return false
    },
    handleImport() {

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleCheckedCitiesChange(value) {
      this.checkedCities = value
    },
    exportData() {
      this.dialogFormVisible = false
    },
    confirmDialog(value) {
      this.dialogFormVisible = false
      var checkedCities = this.checkedCities
      if (checkedCities.length === 0) {
        return
      }
      var title = []
      var columns = this.columns
      for (var i = 0; i < columns.length; i++) {
        var column = columns[i]
        var exist = isInArray(checkedCities, column.model)
        if (exist) {
          title.push(column.name)
        }
      }
      var items = []
      for (let i = 0; i < this.checkedCities.length; i++) {
        var item = []
        for (let j = 0; j < this.tableData.length; j++) {
          item.push(this.tableData[j][this.checkedCities[i]])
        }
        items[this.checkedCities[i]] = item
      }
      console.log(items)
      console.log(title)
      var 	_data = []
      _data.push(title)

      for (let j = 0; j < this.tableData.length; j++) {
        var t =	this.tableData[j]
        var td = []
        for (let i = 0; i < this.checkedCities.length; i++) {
          var d =	t[checkedCities[i]]
          td.push(d)
        }
        _data.push(td)
      }
      importXLSX(_data, this.widget.name)
    }

    /*
                        handleRemove (index) {
                            this.tableData.splice(index, 1)
                        }
                    },
                    mounted () {
                        /*if (this.tableData) {
                            if ( this.tableData!== undefined  ) {
                                if (this.tableData.length==0){
                                    this.handleAddRow();
                                }
                            }

                        }*/

  }

}
</script>

<style lang="scss">
	.row-bd{
		border: 1px solid #EBEEF5;
		padding-top:12px;
	}
	.addRow{
		display: block !important;
		margin-top: 18% !important;
	}
	.is_req {
		content: '*';
		color: #f56c6c;
		margin-right: 4px;
	}
</style>

